<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>    
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="shortcut icon" href="<%=basePath %>/static/css/logo.png">
	<link rel="stylesheet" href="<%=basePath %>/static/css/iconfont.css">
	<link rel="stylesheet" href="<%=basePath %>/static/css/global.css">
	<link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap.min.css">
	<link rel="stylesheet" href="<%=basePath %>/static/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="<%=basePath %>/static/css/swiper.min.css">
	<link rel="stylesheet" href="<%=basePath %>/static/css/styles.css">
	<link rel="stylesheet" href="<%=basePath %>/static2/assets/layer/skin/layer.css">
	
	<script src="<%=basePath %>/static/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="<%=basePath %>/static/js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="<%=basePath %>/static/js/swiper.min.js" charset="UTF-8"></script>
	<script src="<%=basePath %>/static/js/global.js" charset="UTF-8"></script>
	<script src="<%=basePath %>/static/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<script src="<%=basePath %>/static2/assets/layer/layer.js" charset="UTF-8"></script>	
	<script type="text/javascript">

	//查询到所有的商品信息
	$(document).ready(function(){
    	var goodid='<%=request.getParameter("goodid")%>';
    	//alert(goodid);
    	var theme='<%=session.getAttribute("username")%>';
		 //alert(theme);
		 if(theme==null||theme=="null"){
			 $("#dengluzhuce").show(); 
			 $("#tuichudenglu").hide();
			 $("#xianshi").hide();
		 }else{
			 $("#dengluzhuce").hide();  
			 $("#tuichudenglu").show();
		 }
		 
		 $.ajax({
				type:"POST",
				url:"../web/SelectShopCart",
				//data:{userid:userid},
				//dataType:"json",
				success:function(data){
					//alert("ajax");
					
				}
			});
		 
	});
	
	function member_dele(obj,id){
		//alert("layer以外");
		layer.confirm('确认要删除吗？',function(index){
		//alert("进入layer");
		$.ajax({
			type:"POST",
			url:"../web/DelGoodsInSc",
			data:"goodId="+id,
			dataType:"json",
			success:function(data){
				//alert("ajax");
			}
		});
		$(obj).parents("tr").remove();
		layer.msg('已删除!',{icon:1,time:1000});
		});
	}
	
	 //全选函数
    function setAll() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = true;
        }
    }

    //全不选函数
    function setNo() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            loves[i].checked = false;
        }
    }

    //反选
    function setOthers() {
        var loves = document.getElementsByName("love");
        for (var i = 0; i < loves.length; i++) {
            if (loves[i].checked == false)
                loves[i].checked = true;
            else
                loves[i].checked = false;
        }
    }

    //全选/全不选操作
    function setAllNo(){
        var box = document.getElementById("boxid");
        var loves = document.getElementsByName("love");
        if(box.checked == false){
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = false;
            }
        }else{
            for (var i = 0; i < loves.length; i++) {
                loves[i].checked = true;
                }
        }
    }
	
    function getData(){
    	var obj=document.getElementsByName('love'); //选择所有name="'love'"的对象，返回数组 
        //取到对象数组后，我们来循环检测它是不是被选中 
        var s=''; 
        for(var i=0; i<obj.length; i++){ 
            if(obj[i].checked) s+=obj[i].value+','; //如果选中，将value添加到变量s中 
        } 
        //那么现在来检测s的值就知道选中的复选框的值了 
        alert(s==''?'你还没有选择任何内容！':s);
        if(s=='')	return;
        
        window.location.href='../web/addorder_goods?orderData='+s;
        //在这里使用controller进行跳转，而不使用ajax
    }
    
	</script>
	<title>卓越图书网</title>
	<base href="<%=basePath%>jsp/"/>
</head>
<body>
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，欢迎来到<span class="cr">卓越图书网</span>
					<span id="xianshi">尊敬的<%System.out.println(session.getAttribute("username")); %></span>
				</div>
				
			</div>
			<div class="pull-right" id="dengluzhuce">
				<a href="<%=basePath%>jsp/login.jsp"><span class="cr">登录</span></a>
				<a href="<%=basePath%>jsp/login.jsp?p=register">注册</a>
			</div>
			<div class="pull-right" id="tuichudenglu">
			    <a href="<%=basePath%>jsp/udai_welcome.jsp"><span class="cr">个人中心</span></a>
				<a href="<%=basePath%>jsp/login.jsp"><span class="cr">退出登录</span></a>
			</div>
		</div>
	</div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="<%=basePath%>jsp/homePage.jsp"><img src="<%=basePath%>static/images/icons/logo.png" alt="卓越图书网" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="75"><label></label></th>
								<th width="150">图片</th>
								<th width="250">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">总价</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach  items="${shopcartList}" var="good" >
								<tr>
									<td><input type="checkbox" class="ace" name="love" value="${good.goodsId }+${good.price }+${good.count }+${good.goodsImg}"></td>
									<th scope="row">
										<label class="checked-label">
											<input type="hidden" class="id" value="${good.goodsId }">
											<div class="img"><img src="<%=basePath%>${good.goodsImg }" alt="" class="cover"></div>
										</label>
									</th>
									<td>
										<div class="name ep3">名称：${good.goodsName }</div>
									</td>
									<td>¥${good.price }</td>
									<td>
										<div class="cart-num__box">
											<input type="button" class="sub" value="-">
											<input type="text" class="val" value="${good.count }" maxlength="2">
											<input type="button" class="add" value="+">
											<input type="hidden" class="id" value="${good.goodsId }">
										</div>
									</td>
									<td id="account">${good.price* good.count}</td>
									<td>
									
									<a  onclick="member_dele(this,'${good.goodsId }')" id="deleteshopcart" class="btn">删除</a>
									<a class="btn" onclick="getData()">支付</a>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<input type="checkbox" id="boxid" onclick="setAllNo()" />全选/取消全选

					<!-- 
					<input type="button" value="全选" onclick="setAll()" />
				    <input type="button" value="全不选" onclick="setNo()" />
				    <input type="button" value="反选" onclick="setOthers()" />
 					-->			
				    
					<div class="user-form-group tags-box shopcart-submit pull-right">
						
					</div>
					<button  style="float: right;" onclick="getData()">结算</button>
					<div class="checkbox shopcart-total">
						<div class="pull-right">
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var $check_all = $('.check-all'),
								$item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]');
								
							// 全选
							$check_all.on('click', function() {
								if ($(".check-all").prop('checked')){
									$item_checkboxs.prop('checked', $(".check-all").prop('checked'));
									$.ajax({
										type:"GET",
										url:"AllSelect",
										data:{},
										dataType:"json",
										success:function(data){
											$("#sum").jsp(data);
										}
									});
								}else{
									$item_checkboxs.prop('checked', $(".check-all").prop('checked'));
									$.ajax({
										type:"GET",
										url:"AllNotSelect",
										data:{},
										dataType:"json",
										success:function(data){
											$("#sum").jsp(data);
										}
									});
								}
							});
							
							// 点击选择
							$item_checkboxs.on('change', function() {
								var flag = true;
								$item_checkboxs.each(function() {
									if (!$(this).prop('checked')) { flag = false }
								});
								$check_all.prop('checked', flag);
							});
							//点击选择而引起的总价变动
							$item_checkboxs.on('click', function() {
								if (!$(this).prop('checked')) { 
									$.ajax({
										type:"GET",
										url:"SingleSelect",
										data:{sum:""+$("#sum").jsp()+"",goodsId:""+$(this).siblings('.id').val()+"",method:"-"},
										dataType:"json",
										success:function(data){
											$("#sum").jsp(data);
										}
									});
								}else{
									$.ajax({
										type:"GET",
										url:"SingleSelect",
										data:{sum:""+$("#sum").jsp()+"",goodsId:""+$(this).siblings('.id').val()+"",method:"+"},
										dataType:"json",
										success:function(data){
											$("#sum").jsp(data);
										}
									});
								}
								
							});
							// 个数限制输入数字
							$('input.val').onlyReg({reg: /[^0-9.]/g});
							// 加减个数,$(this).siblings('.val').val(Math.max((value -= 1),1));
							$('.cart-num__box').on('click', '.sub,.add', function() {
								var value = parseInt($(this).siblings('.val').val());
								if ($(this).hasClass('add')) {
									var theval =$('#account').val();
									//alert("点击了加，准备修改总价"+ theval );
									
									$.ajax({
										type:"GET",
										url:"../web/UpdateCount",
										data:{goodsId:""+$(this).siblings('.id').val()+"",method:"+"},
										dataType:"json",
										success:function(data){
											$('#account').html(data.price * data.count);
										}
									});
									$(this).siblings('.val').val(Math.min((value += 1),99));
								} else {
									$.ajax({
										type:"GET",
										url:"../web/UpdateCount",
										data:{goodsId:""+$(this).siblings('.id').val()+"",method:"-"},
										dataType:"json",
										success:function(data){
											$('#account').html(data.price * data.count);
										}
									});
									$(this).siblings('.val').val(Math.max((value -= 1),1));
								}
							});
						});
					</script>
				
			</div>
		</section>
	</div>
	
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="<%=basePath%>static/images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="<%=basePath%>static/images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="<%=basePath%>static/images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="<%=basePath%>static/images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="copy-box clearfix">
			<!-- 版权 -->
			<p class="copyright">
			© 2019-2020 卓越图书网 版权所有，并保留所有权利<br>
			ICP备案证书号：20172430715号-2&nbsp;&nbsp;&nbsp;&nbsp;河南省郑州市中原区科学大道100号&nbsp;&nbsp;&nbsp;&nbsp;Tel: 15037393823&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 2313954270@qq.com
		</p>
		</div>
	</div>
</body>
</html>